---
title: useEffect
---

import useEffectWithNoDeps from '../../examples/files/hooks/useEffectWithNoDeps.js'
import useEffectWithDeps from '../../examples/files/hooks/useEffectWithDeps.js'
import useEffectWithEmptyDeps from '../../examples/files/hooks/useEffectWithEmptyDeps.js'

<Author name="@msyleung" url="https://twitter.com/msyleung" />

We use the `useEffect` hook for calling functions with side effects within our components.

## API

The `useEffect` hook takes 2 arguments:

- `callback` - a function with side effects
- `dependencies` - an optional array containing dependency values

When our component function runs, the `callback` will be called if any `dependencies` have changed since the last time the component function ran.

## Example

Here, we use `useEffect` to change the background color to blue when `count` is a multiple of 5. The `callback` is called every time the `color` changes, since `color` is listed as a dependency.

<Example code={useEffectWithDeps} />

## Undefined or empty dependency array

If the dependency array is empty or `undefined`, `useEffect` will have a different behavior.

- `[]` - the `callback` is called only once, right after the component renders for the first time
- `undefined` - the `callback` is called on _every_ component render (every time the component function runs)

### `undefined` dependencies

Here the dependency array is `undefined`, so our `callback` will run every time our component function runs, e.g. any time we click the button and `useState` tells our component to re-run.

<Example code={useEffectWithNoDeps} />

### Empty dependencies

Here the dependency array is empty, so our `callback` will only run once (and permanently set a page background color).

<Example code={useEffectWithEmptyDeps} />
